<template>
	<view class="item-container">
		<view class="list-item">
			<view class="list_top flex">
				<view class="item_top flex">
					<!-- itineraryType 火车01 飞机02 酒店03 -->
					<view v-if="detail.itineraryType == '01'" class="item_type">火车</view>
					<view v-else-if="detail.itineraryType == '02'" class="item_type">飞机</view>
					<view v-else-if="detail.itineraryType == '03'" class="item_type">酒店</view>
					<view v-if="detail.useDate" class="item_time">{{detail.useDate.slice(0,10) + ' ' + detail.ordinal + ' ' + detail.useDate.slice(11,16)}} </view>
				</view>
				<image src="../../../static/travelService/more.png" class='icon_right' mode="aspectFill"></image>
			</view>
			<view class="item_content flex">
				<view class="item_content_l">
					<!-- itineraryType 火车01 飞机02 酒店03 出发时间-->
					<view v-if="detail.itineraryType == '01'" class="tiem">{{detail.fromTime&&detail.fromTime.slice(0,5)}}</view>
					<view v-else-if="detail.itineraryType == '02'" class="tiem">{{detail.fromTime&&detail.fromTime.slice(10,16)}}</view>
					<view v-else-if="detail.itineraryType == '03'" class="tiem">{{detail.fromDate&&detail.fromDate.slice(5,10)}}</view>
					
					<view v-if="detail.itineraryType == '03'" class="area">入住时间</view>
					<view v-else class="area">{{detail.fromStation}}</view>
				</view>
					<image src="/static/travelPlan/icon_line.png" class='icon_line' mode="aspectFill"></image>
				<view class="item_content_r">
					<!-- 到达时间 -->
					<view v-if="detail.itineraryType == '01'" class="tiem">{{detail.toTime&&detail.toTime.slice(0,5)}}</view>
					<view v-else-if="detail.itineraryType == '02'" class="tiem">{{detail.toTime&&detail.toTime.slice(10,16)}}</view>
					<view v-else-if="detail.itineraryType == '03'" class="tiem">{{detail.toDate&&detail.toDate.slice(5,10)}}</view>
					
					<view v-if="detail.itineraryType == '03'" class="area">离店时间</view>
					<view v-else class="area">{{detail.fromStation}}</view>
				</view>
			</view>
			<view v-if="detail.itineraryType == '01'" class="item_bottom">车次：{{detail.vehicleNo}}</view>
			<view v-else-if="detail.itineraryType == '02'" class="item_bottom">航班：{{detail.vehicleNo}}</view>
			<view v-else-if="detail.itineraryType == '03'" class="item_bottom">酒店：{{detail.toStation}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
				detail: Object,//定义参数类型
		},
		data(){
			return {
				// detail: {}
			}
		},
		created() {
		},
		computed:{
			
		},
		methods:{
		}
	}
</script>

<style lang="scss">
	.flex{
		display: flex;
		align-items: center;
	}
	.item-container{
		width: calc(100% - 64rpx);
		padding: 0 32rpx 50rpx;
		color: #333;
	}
	.list-item{
		// height: 334rpx;
		padding: 24rpx 32rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 30rpx 0px rgba(0,0,0,0.08);
		border-radius: 20rpx;
		.list_top{
			justify-content: space-between;
			.item{
				&_top{
					
				}
				&_type{
					width: 68rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					margin-right: 16rpx;
					color: #FFA900;
					line-height: 40rpx;
					text-align: center;
					border-radius: 4rpx;
					border: 1rpx solid #FFA900;
				}
				&_time{
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 45rpx;
				}
			}
		}
		.item_content{
			position: relative;
			justify-content: space-between;
			padding: 26rpx 0;
			margin:20rpx 0;
			border-top: 1rpx solid #E5E5E5;
			border-bottom: 1rpx solid #E5E5E5;
			&_l{
				text-align: left;
			}
			&_r{
				text-align: right;
			}
			.tiem{
				font-size: 44rpx;
				font-weight: 500;
				line-height: 62rpx;
			}
			.area{
				line-height: 40rpx;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
			
		}
		.item_bottom{
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.icon_right {
			position: relative;
			top: 2rpx;
			width: 16rpx;
			height: 28rpx;
			vertical-align: top;
		}
		.icon_line{
			position: absolute;
			top:50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90rpx;
			height: 10rpx;
			}
	}
</style>